<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

    <h1>
        imageCache/index.html
    </h1>
    This example shows how the image cache works
    <br>
    <br>

    <button id="purge" class="btn">Purge Cache</button>
    <button id="addImage" class="btn">Add Image</button>
    <button id="changeImageSize" class="btn">Change Image Size</button>

    <div style="width:512px;height:512px;position:relative;color: white;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
        <div id="dicomImage"
             style="width:512px;height:512px;top:0px;left:0px; position:absolute">
        </div>
        <div id="topleft" style="position: absolute;top:0px; left:0px">
            Patient Name
        </div>
        <div id="topright" style="position: absolute;top:0px; right:0px">
            Hospital
        </div>
        <div id="bottomright" style="position: absolute;bottom:0px; right:0px">
            Zoom:
        </div>
        <div id="bottomleft" style="position: absolute;bottom:0px; left:0px">
            WW/WC:
        </div>

    </div>

    <label>Maximum Cache Size</label>
    <input id="maxCacheSize" type="text" placeholder="">
    <label>Current Cache Size:</label>
    <input id="currentCacheSize" readonly type="text" placeholder="" value="">
    <label># Images Cached:</label>
    <input id="numImagesCached" readonly type="text" placeholder="" value="">
    <button id="apply" class="btn">Apply</button>


</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>


<script>
    $(document).ready(function() {

        var cacheInfo = cornerstone.imageCache.getCacheInfo();
        $('#maxCacheSize').val("" + cacheInfo.maximumSizeInBytes)
        // Add event handler to the ww/wc apply button
        $('#apply').click(function (e) {
            var maxSizeInBytes = parseFloat($('#maxCacheSize').val());
            cornerstone.imageCache.setMaximumSizeBytes(maxSizeInBytes);
        });
        $('#purge').click(function (e) {
            cornerstone.imageCache.purgeCache();
        });

        var imageNum = 2;

        $('#addImage').click(function() {
            var imageId = "colorImageLoader://" + imageNum++;
            cornerstone.loadAndCacheImage(imageId);
        });

        $('#changeImageSize').click(function() {
            var imageId = "colorImageLoader://1";
            cornerstone.imageCache.changeImageIdCacheSize(imageId, 512 * 1024);
        });

        setInterval(function() {
            var cacheInfo = cornerstone.imageCache.getCacheInfo();
            //$('#maxCacheSize').val("" + cacheInfo.maximumSizeInBytes);
            $('#currentCacheSize').val("" + cacheInfo.cacheSizeInBytes);
            $('#numImagesCached').val("" + cacheInfo.numberOfImagesCached);
        }, 100);

        var canvas = document.createElement('canvas');

        // Loads an image given an imageId
        function loadImage  (imageId) {

            var width = 256;
            var height = 256;

            canvas.width = width;
            canvas.height = height;
            var canvasContext = canvas.getContext('2d');
            var imageData = canvasContext.createImageData(width, height);
            var pixelData = imageData.data;
            var index = 0;
            var rnd = Math.round(Math.random() * 255);
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    pixelData[index++] = (x + rnd) % 256; // RED
                    pixelData[index++] = 0; // GREEN
                    pixelData[index++] = 0; // BLUE
                    pixelData[index++] = 255; // ALPHA
                }
            }
            canvasContext.putImageData(imageData, 0, 0);

            function getPixelData()
            {
                return pixelData;
            }

            function getImageData()
            {
                return imageData;
            }

            function getCanvas()
            {
                return canvas;
            }

            var image = {
                imageId: imageId,
                minPixelValue: 0,
                maxPixelValue: 255,
                slope: 1.0,
                intercept: 0,
                windowCenter: 127,
                windowWidth: 256,
                getPixelData: getPixelData,
                getImageData: getImageData,
                getCanvas: getCanvas,
                render : cornerstone.renderColorImage,
                rows: height,
                columns: width,
                height: height,
                width: width,
                color: true,
                columnPixelSpacing: 1.0,
                rowPixelSpacing: 1.0,
                invert: false,
                sizeInBytes : width * height * 4
            };


            // Create a deferred object, resolve it with the image object we just created and return the
            // deferred to cornerstone.  Cornerstone will get the image object by calling then() on the
            // deferred
            var deferred = $.Deferred();
            deferred.resolve(image);
            return deferred;
        }

        cornerstone.registerImageLoader('colorImageLoader', loadImage);

        // image enable the element
        var element = document.getElementById('dicomImage');
        cornerstone.enable(element);

        function onImageRendered(e, eventData) {
            $('#topright').text("Render Time:" + eventData.renderTimeInMs + " ms");
        }
        $(element).on("CornerstoneImageRendered", onImageRendered);

        // load image and display it
        var imageId = "colorImageLoader://1";
        cornerstone.loadAndCacheImage(imageId).then(function(image) {
            cornerstone.displayImage(element, image);

            // add event handlers to mouse move to adjust window/center
            $('#dicomImage').mousedown(function (e) {
                var lastX = e.pageX;
                var lastY = e.pageY;

                $(document).mousemove(function (e) {
                    var deltaX = e.pageX - lastX,
                            deltaY = e.pageY - lastY;
                    lastX = e.pageX;
                    lastY = e.pageY;

                    var viewport = cornerstone.getViewport(element);
                    viewport.voi.windowWidth += (deltaX / viewport.scale);
                    viewport.voi.windowCenter += (deltaY / viewport.scale);
                    cornerstone.setViewport(element, viewport);
                });

                $(document).mouseup(function (e) {
                    $(document).unbind('mousemove');
                    $(document).unbind('mouseup');
                });
            });

        });
    });


</script>
</html>
